<template>
  <div
    class="home-middle1"
    @mouseenter="showNavigation = true"
    @mouseleave="showNavigation = false"
  >
    <div class="home-middle1-content">
      <div class="home-middle1-wrap">
        <div class="index__hd">
          <h2 class="index__tit"><i class="icon_txt"></i></h2>
        </div>
      </div>
      <div class="mod_index_tab">
        <router-link to="/album" class="all-play">更多 ></router-link>
        <a
          class="index_tab__item"
          :class="{ active: homeStore.lan == lan.lan }"
          v-for="lan in homeStore.newSongLanList"
          :key="lan.tjreport"
          >{{ lan.lan }}</a
        >
      </div>
    </div>

    <Carousel
      class="home-middle1-carousel"
      :data="forCarouselData"
      :showNavigation="showNavigation"
      comName="disk"
      :options="{ slidesPerView: 1, slidesPerGroup: 1 }"
    >
      <template #default="{ data }">
        <div>
          <ul class="new-disk-list">
            <li v-for="d in data">
              <div class="img-wrap">
                <router-link :to="`/albumDetail/${d.mid}`">
                  <i class="new-disk-play-icon"></i>
                  <img :src="d.photo" alt="" loading="lazy" />
                </router-link>
              </div>
              <p class="new-disk-title">
                <a href="">{{ d.name }}</a>
              </p>
              <p class="new-disk-name">
                <a href="">{{
                  d.singers.map((singer: any) => singer.name).join()
                }}</a>
              </p>
            </li>
          </ul>
        </div>
      </template>
    </Carousel>
  </div>
</template>

<script lang="ts">
export default {
  name: 'NewDisk',
}
</script>

<script lang="ts" setup>
import Carousel from '@/components/Carousel/index.vue'
import { VideoPlay } from '@element-plus/icons-vue'
import { reactive, ref, watch } from 'vue'
import { useHomeStore } from '@/stores/homeStore'
import { getImgurlApi } from '@/api/home/getRecommendApi'
import type { NewAlbumType } from '@/stores/homeStoreType'

const homeStore = useHomeStore() //获取数据

const showNavigation = ref(false)
const forCarouselData = ref<NewAlbumType[][]>([])
watch(
  () => homeStore.new_album,
  (val) => {
    for (let i = 0; i < val.length; i += 10) {
      forCarouselData.value.push(val.slice(i, i + 10))
    }
  }
)
</script>

<style scoped>
.new-disk-play-icon {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  width: 224px;
  height: 224px;
  background-image: url('./imgs/cover_play.56974e6f.png');
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
  transition: all 0.5s;
  z-index: 1;
}
.new-disk-play-icon:hover {
  transform: scale(1.05);
  opacity: 1;
}
.new-disk-play-icon:hover + img {
  transform: scale(1.05);
}
.new-disk-list {
  width: 1220px;
  height: 616px;
}
.new-disk-list li {
  float: left;
  width: 244px;
  height: 308px;
  box-sizing: border-box;
}
.new-disk-list .img-wrap {
  display: inline-block;
  width: 224px;
  height: 224px;
  overflow: hidden;
}
.img-wrap a {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  transition: 0.5s;
}
.new-disk-title,
.new-disk-name {
  margin-top: 10px;
  box-sizing: border-box;
  padding-right: 18px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.new-disk-title a {
  color: #000;
  font-size: 14px;
}
.new-disk-name a {
  font-size: 14px;
}
.active {
  color: #31c27c;
}

.all-play {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
  cursor: pointer;
}
.all-play:hover {
  color: #31c27c;
}

.home-middle1 {
  background-image: linear-gradient(#f2f2f2, #fff);
  min-width: 1200px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.home-middle1-content {
  width: 1200px;
  margin: 0 auto;
}
.home-middle1-wrap {
  padding: 50px 0 24px 0;
  position: relative;
}
.index__hd {
  position: relative;
}
.index__tit {
  display: block;
  margin: 0 auto;
  width: 196px;
  height: 40px;
  background-image: url('./imgs/index_tit.ee334dbf.png');
  background-position-y: -150px;
}
.mod_index_tab {
  position: relative;
  text-align: center;
  height: 50px;
}
.mod_index_tab a {
  margin: 0 20px;
  font-size: 15px;
  cursor: pointer;
}
.mod_index_tab a:hover {
  color: #31c27c;
}
</style>
